<template>
  <div class="wrapper" :style="pageStyle">
    <!-- uni 中不能使用 vue component 所以用if判断每个组件 -->
    <div v-for="(item, index) in pageData.list" :key="index">
		<div :class="[item.type == 'search'&&index===0?'':'floor-item']">
			<searchView v-if="item.type == 'search'" :res="item.options" :index="index"/>
			<carousel v-if="item.type == 'carousel'" :res="item.options" />
			<titleLayout v-if="item.type == 'title'" :res="item.options" />
			<leftOneRightTwo v-if="item.type == 'leftOneRightTwo'" :res="item.options" />
			<leftTwoRightOne v-if="item.type == 'leftTwoRightOne'" :res="item.options" />
			<topOneBottomTwo v-if="item.type == 'topOneBottomTwo'" :res="item.options" />
			<topTwoBottomOne v-if="item.type == 'topTwoBottomOne'" :res="item.options" />
			<flexThree v-if="item.type == 'flexThree'" :res="item.options" />
			<flexFive v-if="item.type == 'flexFive'" :res="item.options" />
			<flexFour v-if="item.type == 'flexFour'" :res="item.options" />
			<flexTwo v-if="item.type == 'flexTwo'" :res="item.options" />
			<textPicture v-if="item.type == 'textPicture'" :res="item.options" />
			<menuLayout v-if="item.type == 'menu'" :res="item.options" />
			<flexOne v-if="item.type == 'flexOne'" :res="item.options" />
			<goods :enableBottomLoad="enableLoad" v-if="item.type == 'goods'" :res="item.options" />
			<group v-if="item.type == 'group'" :res="item.options" />
			<notice v-if="item.type == 'notice'" :res="item.options" />
			<promotions v-if="item.type == 'promotionDetail'" :res="item.options" />
			<!-- <joinGroup v-if="item.type == 'joinGroup'" :res="item.options" /> -->
			<!-- <integral v-if="item.type == 'integral'" :res="item.options" /> -->
			<!-- <spike v-if="item.type == 'spike'" :res="item.options" /> -->
		</div>
    </div>
    <fetchCoupon ref='coupon' />
    <u-no-network @retry="init" @isConnected="isConnected"></u-no-network>
  </div>
</template>

<script>
// 引用组件
import tpl_banner from "@/pages/tabbar/home/template/tpl_banner"; //导航栏模块
import tpl_title from "@/pages/tabbar/home/template/tpl_title"; //标题栏模块
import tpl_left_one_right_two from "@/pages/tabbar/home/template/tpl_left_one_right_two"; //左一右二模块
import tpl_left_two_right_one from "@/pages/tabbar/home/template/tpl_left_two_right_one"; //左二右一模块
import tpl_top_one_bottom_two from "@/pages/tabbar/home/template/tpl_top_one_bottom_two"; //上一下二模块
import tpl_top_two_bottom_one from "@/pages/tabbar/home/template/tpl_top_two_bottom_one"; //上二下一模块
import tpl_flex_one from "@/pages/tabbar/home/template/tpl_flex_one"; //单行图片模块
import tpl_flex_two from "@/pages/tabbar/home/template/tpl_flex_two"; //两张横图模块
import tpl_flex_three from "@/pages/tabbar/home/template/tpl_flex_three"; //三列单行图片模块
import tpl_flex_five from "@/pages/tabbar/home/template/tpl_flex_five"; //五列单行图片模块
import tpl_flex_four from "@/pages/tabbar/home/template/tpl_flex_four"; //四列单行图片模块
import tpl_text_picture from "@/pages/tabbar/home/template/tpl_text_picture"; //文字图片模板
import tpl_menu from "@/pages/tabbar/home/template/tpl_menu"; //五列菜单模块
import tpl_search from "@/pages/tabbar/home/template/tpl_search"; //搜索栏
import search_view from "@/pages/tabbar/home/template/search_view"; //搜索栏 新
import tpl_group from "@/pages/tabbar/home/template/tpl_group"; //
import tpl_goods from "@/pages/tabbar/home/template/tpl_goods"; //商品分类以及分类中的商品
// 结束引用组件
import { getFloorData } from "@/api/home"; //获取楼层装修接口
import permission from "@/js_sdk/wa-permission/permission.js"; //权限工具类
import config from "@/config/config";

import tpl_notice from "@/pages/tabbar/home/template/tpl_notice"; //标题栏模块
import tpl_promotions from "@/pages/tabbar/home/template/tpl_promotions_detail"; //标题栏模块
import storage from "@/utils/storage.js";
import fetchCoupon from '@/pages/tabbar/home/template/fetch_coupon'
// import {receiveCoupons} from "@/api/members"

export default {
  data () {
    return {
		pageStyle: {},
      config,
      storage,
      showCp:true,
      pageData: "", //楼层页面数据
      enableLoad: false, //触底加载 针对于商品模块
    };
  },
  components: {
    carousel: tpl_banner,
    titleLayout: tpl_title,
    leftOneRightTwo: tpl_left_one_right_two,
    leftTwoRightOne: tpl_left_two_right_one,
    topOneBottomTwo: tpl_top_one_bottom_two,
    topTwoBottomOne: tpl_top_two_bottom_one,
    flexThree: tpl_flex_three,
    flexFive: tpl_flex_five,
    flexFour: tpl_flex_four,
    flexTwo: tpl_flex_two,
    textPicture: tpl_text_picture,
    menuLayout: tpl_menu,
    search: tpl_search,
	searchView: search_view,
    flexOne: tpl_flex_one,
    goods: tpl_goods,
    group: tpl_group,
    notice: tpl_notice,
    promotions: tpl_promotions,
    fetchCoupon
  },

  mounted () {
    this.init();
    // #ifdef MP-WEIXIN
    // 小程序默认分享
    uni.showShareMenu({ withShareTicket: true });
    // #endif
   
  },
  methods: {
    fetchCoupon(){
       this.$refs.coupon.firstGetAuto();
    },
    /**
     * 实例化首页数据楼层
     */
    init () {
      this.pageData = "";
      getFloorData().then((res) => {
        if (res.data.success) {
          const result = JSON.parse(res.data.result.pageData)
          this.pageData = result;
		  this.parsePageStyle();
          if (result.list.length) {
            // 如果最后一个装修模块是商品模块的话 默认启用自动加载
            result.list[result.list.length - 1] ? result.list[result.list.length - 1].model == 'goods' ? this.enableLoad = true : '' : ''
          }
        }
      });
    },
	parsePageStyle() {
      let style = {}
      if (this.pageData) {
        let pageConfig = this.pageData.pageConfig || {}
        if (pageConfig.backgroundImage) {
          style['background-image'] = `url(${pageConfig.backgroundImage})`
          // style['padding'] = '0 3vw'
          style['background-size'] = 'contain'
          style['background-repeat'] = 'no-repeat'
        }
      }
      this.pageStyle = style
	},
    // 是否有网络链接
    isConnected (val) {
      val ? this.init() : ''
    },

  },
};
</script>

<style scoped lang="scss">
.navbar-right {
  padding: 0 16rpx 0 0;
}
.floor-item{
	padding: 0 20rpx;
}
.wrapper{
    background-color: #f1f5f9;
}
</style>
